<template>
  <div class="check-task">
    <div>
      <eagle-image-uploader
        :images.sync="data.Attachs"
        class="m-10"
      ></eagle-image-uploader>
      <div class="up-part">
        <div>
          <div>
            <van-field
              class="input_text"
              label="隐患区域"
              readonly
              required
              input-align="right"
            >
              <template #input>
                <div
                  style="display: flex; color: #1296db"
                  v-if="!data.IsAssignedArea"
                  @click="showDangerAreaDialog = true"
                >
                  <img
                    src="@/assets/Images/AppIcon/icon_danger_select.png"
                    alt=""
                    style="height: 20px; width: 20px"
                  />
                  选择隐患区域
                </div>
              </template>
            </van-field>
          </div>
          <van-field
            v-model="data.HiddenDangerArea"
            :readonly="true"
            placeholder="请选择"
          />
        </div>
        <div>
          <div>
            <van-field
              class="input_text"
              label="隐患详细地点"
              required
              input-align="right"
            >
              <template #input>
                <div></div>
              </template>
            </van-field>
          </div>
          <van-field
            v-model="data.HiddenDangerAddress"
            rows="3"
            autosize
            placeholder="请输入"
            type="textarea"
          />
        </div>
        <div>
          <div>
            <van-field
              class="input_text"
              label="隐患描述"
              required
              input-align="right"
            >
              <template #input>
                <div></div>
              </template>
            </van-field>
          </div>
          <van-field
            v-model="data.HiddenDangerDesc"
            rows="3"
            autosize
            placeholder="请输入"
            type="textarea"
          />
        </div>
        <div>
          <div>
            <van-field
              class="input_text"
              label="整改建议"
              input-align="right"
            >
              <template #input>
                <div></div>
              </template>
            </van-field>
          </div>
          <van-field
            v-model="data.CorrectiveAdvise"
            rows="3"
            autosize
            placeholder="请输入"
            type="textarea"
          />
        </div>
      </div>

      <van-field
        class="input_text"
        v-model="data.LGDFullName"
        label="隐患分类"
        placeholder="请选择"
        required
        readonly
        @click="showDangerTypeDialog = true"
      >
        <template #right-icon>
          <van-icon name="arrow" />
        </template>
      </van-field>
      <!-- 单选框 -->
      <!-- <van-field class="input_text" name="radio" label="严重度" required>
                <template #input>
                    <van-radio-group v-model="data.HiddenDangerType" direction="horizontal">
                        <van-radio v-for="item in data.HiddenDangerTypes" style="margin: 0 10px 10px 0" v-bind:key="item.ID" v-bind:name="item.ID">
                            {{ item.Name }}
                        </van-radio>
                    </van-radio-group>
                </template>
            </van-field> -->
      <van-field
        v-model="data.PersonInChargeChnName"
        label="直接责任人"
        placeholder="操作违规类请输责任人姓名"
      />
      <van-field
        v-if="data.CheckJudge == '1'"
        class="input_text"
        :value="correctiveFullName"
        label="整改人"
        placeholder="请选择"
        required
        readonly
        @click="showDeptUser()"
      >
        <template #right-icon>
          <van-icon name="arrow" />
        </template>
      </van-field>
      <date-picker
        v-if="data.CheckJudge == '1'"
        label="整改期限"
        labelWidth:96
        showFastSelect="true"
        :date.sync="data.CorrectiveDate"
      ></date-picker>

      <div v-if="data.CheckJudge == '3'">
        <div>
          <van-field
            class="input_text"
            label="退回原因"
            required
            input-align="right"
          >
            <template #input>
              <div></div>
            </template>
          </van-field>
        </div>
        <van-field
          v-model="data.Remarks"
          rows="3"
          autosize
          placeholder="请输入"
          type="textarea"
        />
      </div>

      <van-divider />

      <!-- <van-field
        v-model="data.OrderNo"
        label="物料批次信息1"
        placeholder="请输入"
        @keypress="onInfoInput"
        isScan
        isInputText
      >
      </van-field> -->
      <eagle-input
        label="物料批次信息1"
        placeholder="请输入"
        isScan
        v-model="data.OrderNo"
        isInputText
        @keypress="onInfoInput"
      >
      </eagle-input>
      <van-field
        v-model="data.Spec"
        label="物料批次信息2"
        placeholder="请输入"
        @keypress="onInfoInput"
      >
      </van-field>
      <van-field
        v-model="data.Model"
        label="物料批次信息3"
        placeholder="请输入"
        @keypress="onInfoInput"
      >
      </van-field>
      <van-field
        v-model="data.Model2"
        label="物料批次信息4"
        placeholder="请输入"
        @keypress="onInfoInput"
      >
      </van-field>
      <van-field
        v-model="data.Model3"
        label="物料批次信息5"
        placeholder="请输入"
        @keypress="onInfoInput"
      >
      </van-field>
      <van-field
        v-if="this.data.Status == 15"
        class="input_text"
        label="退回原因"
        placeholder="暂无"
        readonly
        type="textarea"
        rows="1"
        autosize
        v-model="data.Remarks"
      >
      </van-field>
      <div
        class="det_tab_item"
        style="margin-top: 10px"
        v-if="this.data.Status == 20"
      >
        <div class="operate_det">
          <div style="margin-bottom: 10px">操作历史记录</div>
          <div class="operate_list">
            <van-row class="operate_row_first">
              <van-col span="4">序号</van-col>
              <van-col
                offset="1"
                span="10"
              >操作</van-col>
            </van-row>
            <van-row
              v-for="(item, index) in this.data.LogList"
              :key="index"
              class="operate_row"
            >
              <van-col span="4">{{ index + 1 }}</van-col>
              <van-col
                offset="1"
                span="18"
              >{{ item.OperateLog }}
                <div v-if="item.Attachs">
                  <eagle-image-preview :images="item.Attachs">
                  </eagle-image-preview>
                </div>
              </van-col>
            </van-row>
          </div>
        </div>
      </div>
      <template v-if="
          roles.indexOf('admin') != -1 &&
          this.data.OriginType == 3 &&
          !this.data.ID
        ">
        <div class="bottom-btns">
          <van-button
            class="submit-btn"
            type="primary"
            @click="save(false, 'close')"
          >
            暂存并关闭
          </van-button>
          <van-button
            type="info"
            class="submit-btn"
            @click="save(false, 'info')"
          >
            暂存并继续
          </van-button>
        </div>
        <div class="bottom-btns">
          <van-button
            type="warning"
            class="delete-btn"
            @click="save(true, 'pust')"
          >
            提交
          </van-button>
        </div>
      </template>
      <template v-else-if="roles.indexOf('admin') != -1 && this.data.Status == 20">
        <div class="bottom-btns">
          <van-button
            type="primary"
            class="submit-btn"
            @click="save(true, 'pust')"
          >
            确认
          </van-button>
          <van-button
            type="warning"
            class="submit-btn ml-10"
            @click="backHiddenDanger()"
          >
            退回
          </van-button>
        </div>
      </template>
      <template v-else>
        <div class="bottom-btns">
          <van-button
            type="primary"
            class="submit-btn"
            @click="save(true, 'pust')"
          >
            提交
          </van-button>
          <van-button
            class="submit-btn"
            type="info"
            @click="save(false, 'close')"
          >
            暂存
          </van-button>
        </div>
      </template>
      <template v-if="this.data.ID && this.data.Status < 20">
        <div class="bottom-btns">
          <van-button
            type="warning"
            class="delete-btn"
            @click="handleDelete()"
          >
            删除
          </van-button>
        </div>
      </template>
    </div>
    <!-- 隐患区域 -->
    <danger-area-dialog
      :show.sync="showDangerAreaDialog"
      @callback="onDangerAreaCallback"
    ></danger-area-dialog>
    <!-- 隐患分类 -->
    <danger-type-dialog
      :show.sync="showDangerTypeDialog"
      @callback="onDangerTypeCallback"
    ></danger-type-dialog>
    <user-choose-dialog
      isMulti="f"
      @callback="onUserCallback"
      :show.sync="showUserChooseDialog"
    >
    </user-choose-dialog>
    <user-choose-dialog
      isMulti="f"
      @callback="onshowUserPersonInChargeDialogCallback"
      :show.sync="showUserPersonInChargeDialog"
      title="选择责任人"
    >
    </user-choose-dialog>

    <BackHiddenDialog
      :show="showBackDialog"
      :id="this.data.ID"
      @cb="onBack"
    />
  </div>
</template>


<script>
import {
  initNewEntity,
  SnapShotAdd,
  getDangerDetail,
} from "@/api/sytech/sytechDangerCheckTaskDetail";
import {
  handleDelete,
  SaveHiddenDanger,
  SaveDetail,
} from "@/api/sytech/sytechDangerCheckTaskDetail";
import { mapGetters } from "vuex";
import store from "@/store/index";
import { Dialog } from "vant";
import BackHiddenDialog from "@/views/sytech/sytechDangerCheckTaskDetail/components/BackHiddenDanger.vue";
import DangerTypeDialog from "@/views/sytech/sytechDangerCheckTaskDetail/components/DangerTypeDialog.vue";
import DangerAreaDialog from "@/views/sytech/sytechDangerCheckTaskDetail/components/DangerAreaDialog.vue";
import DepartmentAndUserDialog from "@/views/components/department/departmentUserChooseDialog.vue";
import UserChooseDialog from "@/views/sytech/sytechDangerCheckTaskDetail/UserChooseDialog.vue";

export default {
  components: {
    BackHiddenDialog,
    DangerTypeDialog,
    DangerAreaDialog,
    DepartmentAndUserDialog,
    UserChooseDialog,
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      data: {
        OriginType: this.$route.query.originType || 3,
        LogList: [],
        DangerSimpleType: false,
        Spec: "",
        OrderNo: "",
      },
      id: "",
      isShow: false,
      showBackDialog: false,
      showDangerAreaDialog: false,
      showDangerTypeDialog: false,
      showDepartmentAndUserDialog: false,
      showUserChooseDialog: false,
      showUserPersonInChargeDialog: false,
      clecar: false,
    };
  },
  computed: {
    ...mapGetters(["CompanyCode", "roles"]),
    correctiveFullName: {
      get: function () {
        if (this.data.CorrectiveDeptCode) {
          if (this.data.CorrectiveUserName) {
            return (
              this.data.CorrectiveDeptName + "-" + this.data.CorrectiveChnName
            );
          } else {
            return this.data.CorrectiveDeptName;
          }
        } else {
          return this.data.CorrectiveChnName;
        }
      },
      set: function (item) {
        if (item) {
          this.data.CorrectiveDeptName = item.OrgName || "";
          this.data.CorrectiveDeptCode = item.OrgCode || "";
          this.data.CorrectiveChnName = item.ChnName || "";
          this.data.CorrectiveUserName = item.UserName || "";
        }
      },
    },
  },
  created() {
    if (this.$route.query.ctCode) {
      this.ctCode = this.$route.query.ctCode || "";
    }
    this.data.ID = this.$route.query.id || 0;
    this.data.OriginType = this.$route.query.originType || 3;
    if (!this.data.ID) {
      this.initNewEntity();
    } else {
      this.getDangerDetail();
    }
  },
  methods: {
    scanresultcallback(str) {
      var values = str.split(" ");
      this.data.OrderNo = values.length > 0 ? values[0] : "";
      this.data.Spec = values.length > 1 ? values[1] : "";
      this.data.Model = values.length > 2 ? values[2] : "";
      this.data.Model2 = values.length > 3 ? values[3] : "";
      this.data.Model3 = values.length > 4 ? values[4] : "";
    },
    onInfoInput(e) {
      if (e.charCode == 13) {
        var value = e.target._value;
        var values = value.split(" ");
        this.data.OrderNo = values.length > 0 ? values[0] : "";
        this.data.Spec = values.length > 1 ? values[1] : "";
        this.data.Model = values.length > 2 ? values[2] : "";
        this.data.Model2 = values.length > 3 ? values[3] : "";
        this.data.Model3 = values.length > 4 ? values[4] : "";
      }
    },
    showDeptUser() {
      this.showUserChooseDialog = true;
    },
    showUserPersonInCharge() {
      this.showUserPersonInChargeDialog = true;
    },
    calcTitle() {
      let originType = this.data.OriginType;
      let id = this.data.ID;
      let title = "新增随手拍";
      if (this.data.Status == 20) {
        title = "隐患确认";
      } else if (originType == 3) {
        if (id > 0) {
          title = "随手拍编辑";
        }
      } else if (originType == 1) {
        if (id > 0) {
          title = "检查表检查编辑";
        }
      }
      store.commit("updateTitle", title);
    },
    // 计划详情
    initNewEntity() {
      var me = this;
      const param = {
        id: 0,
        ctCode: this.ctCode || "",
        OriginType: this.data.OriginType,
      };
      initNewEntity(param).then((res) => {
        this.data = res.data;
        this.data.HiddenDangerType = "1";
        this.data.CheckJudge = "1";
        if (this.$route.query.file) {
          this.data.Attachs = this.$route.query.file;
        }
        if (this.$route.params.vobj) {
          this.data.CorrectiveAdvise = this.$route.params.vobj.CorrectiveAdvise;
          this.data.HiddenDangerDesc = this.$route.params.vobj.HiddenDangerDesc;
          this.data.OriginType = 2;
          this.data.LGDName = this.$route.params.vobj.DName;
          this.data.LGDCode = this.$route.params.vobj.DCode;
          this.data.OriginalText = this.$route.params.vobj.OriginalText;
          this.data.GistSource = this.$route.params.vobj.GistSource;
          this.data.LGCode = this.$route.params.vobj.LGCode;
          this.data.LegalLiability = this.$route.params.vobj.LegalLiability;
          this.data.HiddenDangerAreaType =
            this.$route.params.vobj.HiddenDangerType;
          this.data.LGDType = this.$route.params.vobj.DType;
        }
        this.calcTitle();
      });
    },
    getDangerDetail() {
      const param = {
        id: this.data.ID,
      };
      getDangerDetail(param).then((res) => {
        this.data = res.data;
        this.data.CheckJudge = "1";
        if (this.data.Status == 20) {
          this.data.Remarks = "";
        }
        this.calcTitle();
      });
    },
    onDateCallback(date) {
      this.data.CorrectiveDate = date;
    },
    clearOrgCode() {
      this.data.PersonInChargeUserName = "";
      this.data.PersonInChargeChnName = "";
    },
    // 点击保存
    save(confirm, info) {
      if (!this.data.Attachs && this.data.OriginType == 3) {
        return this.$toast("随手拍必须选择隐患图片!");
      }
      if (info == "pust") {
        if (!this.data.HiddenDangerArea) {
          return this.$toast("请选择隐患区域");
        }
        if (!this.data.HiddenDangerArea) {
          return this.$toast("请输入隐患详细地点");
        }
        if (!this.data.HiddenDangerDesc) {
          return this.$toast("请输入隐患描述");
        }
        if (!this.data.LGDName) {
          return this.$toast("请选择隐患分类");
        }
        if (this.data.CheckJudge == "1") {
          if (!this.data.CorrectiveDeptCode && !this.data.CorrectiveUserName) {
            return this.$toast("请选择整改人");
          }
        } else {
          if (!this.data.Remarks) {
            return this.$toast("请输入退回原因");
          }
        }
      }
      if (confirm) {
        Dialog.confirm({
          title: "询问",
          message:
            this.data.Status == 20
              ? "您确定要确认该质量隐患记录吗?"
              : "您确定要提交该质量隐患记录吗?",
        }).then(() => {
          this.saveCore(confirm, info);
        });
      } else {
        this.saveCore(confirm, info);
      }
    },
    saveCore(confirm, info) {
      this.loading = true;
      let form = {
        ID: this.data.ID,
        OriginType: this.data.OriginType || 3,
        CompanyCode: this.CompanyCode,
        IsAssignedArea: this.data.IsAssignedArea,
        HiddenDangerDesc: this.data.HiddenDangerDesc,
        CorrectiveAdvise: this.data.CorrectiveAdvise,
        HiddenDangerAddress: this.data.HiddenDangerAddress,
        HiddenDangerArea: this.data.HiddenDangerArea,
        HiddenDangerAreaType: this.data.HiddenDangerAreaType,
        HiddenDangerAreaCode: this.data.HiddenDangerAreaCode,
        Attachs: this.data.Attachs,
        HiddenDangerType: this.data.HiddenDangerType,
        LegalLiability: this.data.LegalLiability,
        OriginalText: this.data.OriginalText,
        LGCode: this.data.LGCode,
        LGDCode: this.data.LGDCode,
        LGDName: this.data.LGDName,
        LGDType: this.data.LGDType,
        CorrectiveUserName: this.data.CorrectiveUserName,
        CorrectiveChnName: this.data.CorrectiveChnName,
        CorrectiveDeptCode: this.data.CorrectiveDeptCode,
        CorrectiveDeptName: this.data.CorrectiveDeptName,
        GistSource: this.data.GistSource,
        CorrectiveDate: this.data.CorrectiveDate,
        OrderNo: this.data.OrderNo,
        CheckJudge: this.data.CheckJudge,
        Remarks: this.data.Remarks,
        Spec: this.data.Spec,
        Model: this.data.Model,
        Model2: this.data.Model2,
        Model3: this.data.Model3,
        Submit: confirm,
        PersonInChargeChnName: this.data.PersonInChargeChnName,
        PersonInChargeUserName: this.data.PersonInChargeUserName,
      };
      // 检查任务详情
      if (this.ctCode) {
        form.CTCode = this.ctCode;
        form.CompanyCode = this.data.CompanyCode;
      }
      if (!this.data.ID) {
        let originType = this.data.OriginType;
        SnapShotAdd(form, confirm).then((res) => {
          this.loading = false;
          this.$toast.success("保存成功");
          if (info == "info") {
            this.data.ID = 0;
            this.data.Attachs = null;
            this.data.OriginType = originType;
            this.data.CorrectiveAdvise = null;
            this.data.HiddenDangerDesc = null;
            this.data.HiddenDangerAddress = null;
            this.data.LGDCode = null;
            this.data.LGDName = null;
            this.data.LGDType = null;
            this.data.LGCode = null;
            this.data.LegalLiability = null;
            this.data.OriginalText = null;
            this.data.GistSource = null;
            this.data.CorrectiveDeptName = null;
            this.data.CorrectiveDeptCode = null;
            this.data.CorrectiveChnName = null;
            this.data.CorrectiveUserName = null;
            this.data.HiddenDangerType = "1";
            return;
          }
          setTimeout(() => {
            this.$router.goRefresh();
          }, 500);
        });
      } else {
        if (this.data.Status == 20) {
          SaveHiddenDanger(form, confirm).then((res) => {
            this.loading = false;
            this.$toast.success("确认成功");
            setTimeout(() => {
              this.$router.goRefresh();
            }, 500);
          });
        } else {
          SaveDetail(form, confirm).then((res) => {
            this.loading = false;
            this.$toast.success("提交成功");
            setTimeout(() => {
              this.$router.goRefresh();
            }, 500);
          });
        }
      }
    },
    handleDelete() {
      Dialog.confirm({
        title: "询问",
        message: "确定要删除该条记录吗?",
      })
        .then(() => {
          handleDelete({ id: this.data.ID }).then((res) => {
            this.$toast.success("删除成功！");
            this.$router.goRefresh();
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    // 隐患分类回调
    onDangerAreaCallback(item) {
      if (item) {
        this.$set(this.data, "HiddenDangerArea", item.AreaName);
        this.data.HiddenDangerAreaCode = item.AreaCode;
        this.data.HiddenDangerAreaName = item.AreaName;
        this.data.HiddenDangerAreaType = item.AreaType;
        this.showDangerAreaDialog = false;
      }
    },
    // 隐患分类回调
    onDangerTypeCallback(item) {
      if (item) {
        this.data.LGDCode = item.DCode;
        this.data.LGDName = item.DName;
        this.data.LGDType = item.DType;
        this.data.LGDFullName = item.DFullName;
        this.showDangerTypeDialog = false;
      }
    },
    // 选择部门人回调
    onUserCallback(item) {
      this.correctiveFullName = item;
      this.showDepartmentAndUserDialog = false;
      this.showUserChooseDialog = false;
    },
    onshowUserPersonInChargeDialogCallback(item) {
      this.data.PersonInChargeChnName = item.ChnName;
      this.data.PersonInChargeUserName = item.UserName;
      this.showUserPersonInChargeDialog = false;
    },
    backHiddenDanger() {
      this.showBackDialog = true;
    },
    onBack(result) {
      if (result) {
        this.$toast("退回成功");
        this.$router.goRefresh();
      }
      this.showBackDialog = false;
    },
  },
};
</script>

<style lang="less" scoped>
.check-task {
  background-color: #e8f1f8;
  padding-bottom: 20px;
}
.problem {
  margin-bottom: 10px;
}
.bottom-btns {
  margin-top: 10px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .submit-btn {
    width: 48%;
    height: 35px;
    font-size: 14px;
  }
  .delete-btn {
    width: 100%;
    height: 35px;
    font-size: 14px;
  }
}
.warning {
  background-color: #fff;
  padding: 10px;
  font-size: 10px;
}

.det_tab_item {
  padding: 10px 0;
  background-color: #fff;
  border-radius: 5px;
  margin-bottom: 10px;

  .det_tab_item_text {
    padding: 0 10px;
  }
}
.operate_det {
  background-color: #fff;
  padding: 10px;
  .operate_list {
    font-size: 12px;
    border: 1px solid #e8f1f8;
    .operate_row_first {
      padding: 10px;
      background-color: #e8f1f8;
      border-bottom: 1px solid #e8f1f8;
      margin-bottom: 10px;
    }
    .operate_row {
      padding: 10px;
      border-bottom: 1px solid #e8f1f8;
      line-height: 16px;
    }
  }
}
.week {
  color: rgb(0, 195, 224);
}

.van-divider {
  height: 1px;
  margin: 0px;
}
</style>
